<template>
    <div>
        <div class="header">
            房间列表
        </div>
        <!-- 查询 -->
        <div class="">
            <el-collapse>
                <el-collapse-item name="1" class="top">
                    <template slot="title">
                        <span style="padding:0 20px;">
                            <i class="el-icon-search"></i>筛选查询
                        </span>
                    </template>
                    <div class="form">
                        <el-form :inline="true" :model="form" label-width="100px">
                            <el-form-item label="楼栋ID：">
                                <el-cascader v-model="query.buildingid" :options="buildata" :props="propstag" clearable
                                    style="width:150px;">
                                </el-cascader>
                            </el-form-item>
                            <el-form-item label="房间号：">
                                <el-input v-model="query.houseno" style="width:100px"></el-input>
                            </el-form-item>
                            <el-form-item label="房间类型：">
                                <el-input v-model="query.type" style="width:100px"></el-input>
                            </el-form-item>
                            <el-form-item label="房屋面积范围：" label-width="120px">
                                <el-input v-model="query.areas" style="width:65px"></el-input> —
                                <el-input v-model="query.areas2" style="width:65px"></el-input>
                            </el-form-item>
                            <el-form-item label="房间朝向：">
                                <el-select v-model="query.orientation" placeholder="请选择" style="width:100px">
                                    <el-option v-for="item in orientation" :key="item.id" :label="item.name"
                                        :value="item.name"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item style="margin-left:20px">
                                <el-button style="width:80px" type="primary" @click="onSubmit">查询</el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                </el-collapse-item>
            </el-collapse>
            <div class="btm">
                <span>数据列表</span>
                <el-button type="primary" @click="dialogVisible= true">添加</el-button>
                <el-button type="danger" @click="dels">批量删除</el-button>
            </div>
        </div>
        <!-- 列表 -->
        <div style="padding:20px">
            <Table :tableCols="tableCols" :tableData="tableData" :selection="selection" :total="total"
                @pagechange="pagechange" @remove="remove">
                <template #option="{row}">
                    <el-button type="success" @click="handleClick(row)">修改</el-button>
                    <el-button type="danger" @click="del(row.id)">删除</el-button>
                </template>
            </Table>
        </div>
        <!-- 添加 -->
        <div>
            <Add :dialogVisible="dialogVisible" @isclose="isclose" :handleClickdata="handleClickdata"></Add>
        </div>
    </div>
</template>

<script>
import Table from './Table/Table.vue';
import Add from '@/components/add/addhouse.vue'
import { houselist, builList, Del, Dels } from '@/api/house'
export default {
    components: {
        Table,
        Add
    },
    data() {
        return {
            dialogVisible: false,
            propstag: {
                value: 'id',
                label: 'name',
                children: 'children',
                checkStrictly: true,
                emitPath: false
            },
            orientation: [
                { name: '朝北', id: '1' },
                { name: '朝南', id: '2' },
                { name: '朝西', id: '3' },
                { name: '朝东', id: '4' }
            ],
            selection: true,

            form: {

            },
            tableCols: [
                {
                    prop: "id",
                    lable: "id",
                    // width: 100
                },
                {
                    prop: "building",
                    lable: "楼号",
                    width: 400
                },
                {
                    prop: "houseno",
                    lable: "房间号",
                    // width: 100
                },
                {
                    prop: "areas",
                    lable: "面积（平米）",
                    // width: 100
                },
                {
                    prop: "type",
                    lable: "房间类型",
                    // width: 100
                },
                {
                    prop: "orientation",
                    lable: "朝向",
                    // width: 100
                },
                {
                    lable: "操作",
                    coltype: "option",
                    slotname: "option"
                },
            ],
            buildata: [],
            tableData: [],
            total: 0,
            query: {
                key: "",
                page: 1,
                psize: 5
            },
            handleClickdata: {},
            ids:[]
        };
    },
    created() {
        this.getbuilList(),
            this.gethouselist()
    },
    methods: {
        async gethouselist() {
            let res = await houselist(this.query)
            if (res.errCode == 10000) {
                this.tableData = res.data.list
                this.total = res.data.counts
            }
        },
        async getbuilList() {
            let res = await builList()
            if (res.errCode == 10000) {
                this.buildata = res.data.list
            }
        },
        // 单删
        del(id) {
            this.$confirm('此操作将永久删除该文件, 是否继续?', '警告', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                center: true
            }).then(async () => {
                let res = await Del({ id: id })
                if (res.errCode == 10000) {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                }
                this.gethouselist()
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        // 批删
        dels() {
            // this.$confirm('此操作将永久删除该文件, 是否继续?', '警告', {
            //     confirmButtonText: '确定',
            //     cancelButtonText: '取消',
            //     type: 'warning',
            //     center: true
            // }).then(async () => {
            //     let res = await Dels({ id: this.ids })
            //     if (res.errCode == 10000) {
            //         this.$message({
            //             type: 'success',
            //             message: '删除成功!'
            //         });
            //     }
            //     this.gethouselist()
            // }).catch(() => {
            //     this.$message({
            //         type: 'info',
            //         message: '已取消删除'
            //     });
            // });
        },
        onSubmit() {
            this.gethouselist()
        },
        remove(val){
            this.ids = val
            console.log(val);
        },
        // 分页
        pagechange(val) {
            this.query = val
            this.gethouselist()
        },
        isclose(val, isrefresh = false, editdata = {}) {
            this.dialogVisible = val
            // this.handleClickdata = editdata
            if (isrefresh) {
                this.gethouselist()
            }
        },
        handleClick(val) {
            this.handleClickdata = val
            this.dialogVisible = true
        }
    },
}
</script>

<style lang="less" scoped>
.header {
    display: flex;
    position: relative;
    padding: 0 10px;
    height: 21px;
    margin-bottom: 15px;
    color: #427ff4;
    font-size: 16px;
}

.top {
    border: 1px solid #e4e4e4 !important;
    // padding: 0 20px;
    background-color: #f3f3f3 !important;
}

/deep/.inp {
    background-color: #e4e4e4;
}

/deep/.el-collapse-item__header {
    background: #f3f3f3 !important;
}

.form {
    padding: 0 20px;
}

/deep/.el-form-item {
    margin-bottom: 0 !important;
    // margin-top: 25px;
    padding: 17px 0;
}

/deep/.el-collapse-item__content {
    padding-bottom: 0 !important;
}

.btm {
    height: 60px;
    background: #f3f3f3;
    display: flex;
    align-items: center;
    padding: 0 25px;

    span {
        margin-right: 40px;
        font-size: 14px;
        color: #676766;
    }
}
</style>